<template>
  <div class="total-container">
    <div class="weather-area">
      <weather></weather>
    </div>
    <div class="star-area">
      <star></star>
    </div>
    <div class="help-decide-area">
      <help-decide/>
    </div>
    <div class="news-area">
      <news/>
    </div>
  </div>
</template>
<script>
import Weather from '../../components/Weather/Weather'
import Star from '../../components/Star/Star'
import HelpDecide from '../../components/HelpDecide/HelpDecide'
import News from '../../components/News/News'
export default {
  components: {News, HelpDecide, Weather, Star}
}
</script>

<style>
.total-container {
  display: grid;
}
.weather-area {
  height: 390px;
}
.star-area {
  margin-top: 6px;
}
.help-decide-area {
  justify-self: center;
  margin-top: 20px;
}
.news-area {
  margin-top: 30px;
  margin-right: 15px;
}
</style>
